<template>
  <div class="slider" ref="slider">
    <div class="slider-group" ref="sliderGroup">
      <slot>
      </slot>
    </div>
    <div class="dots">
      <span class="dot" v-for="(item,index) in dots" :key="index"
            :class="currentpageIndex == index ? 'active':''"></span>
    </div>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  import {addClass} from "../common/js/dom";

  export default {
    data() {
      return {
        dots: [],//小圆点的数组
        currentpageIndex: 0,//当前轮播到的图片的下标
      }
    },
    props: {
      loop: {//是否循环轮播
        type: Boolean,
        default: true
      },
      autoplay: {//是否自动播放
        type: Boolean,
        default: true
      },
      interVal: {//轮播的间隔时间
        type: Number,
        default: 4000
      }
    },
    mounted() {
      setTimeout(() => {
        this._setSliderWidth(false)
        this._initDots()
        this._initSlider()
        if (this.autoplay) {
          this._play()
        }
      }, 20)

      //监听屏幕尺寸是否有变化
      window.addEventListener('resize',()=>{
        //如果这个时候
        if(!this.slider){
          return ;
        }
        //传的参数代表是否是resize过来的，是的话需要重新计算,不传的话就undefind ,!undefined是true
        this._setSliderWidth(true)
        //调用better-scroll的refresh函数，使其重新计算的值展示在屏幕上
        this.slider.refresh()
      })

    },
    destroyed() {
      clearTimeout(this.timer)
    },
    methods: {
      //设置轮播图的宽度
      _setSliderWidth(isResize) {
        this.children = this.$refs.sliderGroup.children
        let width = 0 // sliderGroup的宽度
        let sliderwidth = this.$refs.slider.clientWidth
        for (let i = 0; i < this.children.length; i++) {
          let child = this.children[i]
          addClass(child, 'slider-item')
          child.style.width = sliderwidth + 'px'
          // console.log(child.style.width)
          width += sliderwidth
        }
        // console.log(width)
        if (this.loop && !isResize) {
          width += 2 * sliderwidth
        }
        this.$refs.sliderGroup.style.width = width + 'px'
        // console.log(this.$refs.sliderGroup.style.width)
      },
      //初始化轮播图
      _initSlider() {
        // console.log(this.loop)
        this.slider = new BScroll(this.$refs.slider, {
          scrollX: true,
          scrollY: false,
          momentum: false,
          snap: {
            loop: this.loop,
            threshold: 0.3,
            speed: 400
          }
        })
        //监听计算下一页
        this.slider.on('scrollEnd', () => {
          let pageIndex = this.slider.getCurrentPage().pageX
          this.currentpageIndex = pageIndex

          if (this.autoplay) {
            clearTimeout(this.timer)
            this._play()
          }
        })
        //监听回滚
        this.slider.on('scrollStart', () => {
          clearTimeout(this.timer);
        });
      },
      //设置轮播的切换的小圆点
      _initDots() {
        this.dots = new Array(this.children.length)
      },
      //设置自动滚动轮播图
      _play() {
        this.timer = setTimeout(() => {
          this.slider.next()
        }, this.interVal)
      }
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../src/common/stylus/variable.styl"

  .slider
    min-height: 1px
    position relative

    .slider-group
      position: relative
      overflow: hidden
      white-space: nowrap

      .slider-item
        float: left
        box-sizing: border-box
        overflow: hidden
        text-align: center

        a
          display: block
          width: 100%
          overflow: hidden
          text-decoration: none

        img
          display: block
          width: 100%

    .dots
      position: absolute
      right: 0
      left: 0
      bottom: 12px
      text-align: center
      font-size: 0

      .dot
        display: inline-block
        margin: 0 4px
        width: 8px
        height: 8px
        border-radius: 50%
        background: $color-text-l

        &.active
          width: 20px
          border-radius: 5px
          background: $color-theme
</style>
